<template>
  <div class="dynamic">
    <div>动态</div>
    <p class="hr"></p>
    <ul v-for="item in dynamicList" :key="item.id">
      <li>
        <div class="headPortrait" :style="`background-image: url(${item.headPortrait})`">
          <!-- <img :src="item.headPortrait" alt=""> -->
        </div>
        {{ item.title }} {{ item.behavior }} {{ item.content }}
      </li>
      <li class="hr"></li>
    </ul>
  </div>
</template>

<script>
import headPortrait01 from '@/assets/img/headPortrait/01.png';
import headPortrait02 from '@/assets/img/headPortrait/02.jpg';
import headPortrait03 from '@/assets/img/headPortrait/03.jpg';

export default {
  data() {
    return {
      dynamicList: [
        {
          id: 1,
          title: '曲林龙',
          behavior: '新建项目',
          content: '博士顿奶茶',
          headPortrait: headPortrait01
        },
        {
          id: 2,
          title: '李柳琴',
          behavior: '删除项目',
          content: '博士顿奶茶',
          headPortrait: headPortrait02
        }, {
          id: 3,
          title: '鲤鱼',
          behavior: '新发布',
          content: '留言',
          headPortrait: headPortrait03
        },
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.dynamic {
  // height: 430px;
  padding: 17px;
  background-color: white;

  >div:nth-of-type(1) {
    text-align: start;
  }

  .headPortrait {
    display: inline-block;
    width: 32px;
    height: 32px;
    padding-bottom: 5px;
    vertical-align: middle;
    background-size: cover;
    background-color: white;
    border-radius: 50%;
  }
}

.hr {
  height: 1px;
  background-color: #000;
}
</style>
